<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>

<body>
    <a href="https://www.runoob.com/ajax/ajax-json.html">参考代码</a>
    <a href="https://www.baidu.com"><img src="baidu.png" alt="百度地址" width="400px" height="100px"></a>
    <hr>
    <form action="https://d21d-183-167-205-82.ngrok-free.app/login" method="post"
        enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" id="username" placeholder="请输入用户名" required>
        <br>
        <input type="password" name="password" id="password" placeholder="请输入密码" required>
        <br>
        <input type="text" name="stuId" id="" placeholder="请输入学号">
        <br>
        <input type="text" name="name" id="" placeholder="请输入姓名">
        <br>
        <input type="text" name="qiandaoma" id="qiandaoma" placeholder="请输入签到码" required>
        <br>
        <input type="checkbox"> 记住密码<br> 
        <button type="submit">登录</button>
    </form>
    <hr>
    <button id="getLoginInfo">获取账号密码信息</button>
    <br>
    <span>账号，密码，签到码</span>

    <script>
        let btn = document.getElementById("getLoginInfo");
        let account = document.querySelector("span");
        btn.onclick = getLoginInfo;
        function getLoginInfo() {
            var url = "https://d21d-183-167-205-82.ngrok-free.app/qiandaoma";
            var xmlrequest = new XMLHttpRequest();
            xmlrequest.onreadystatechange = function () {
                if (xmlrequest.readyState == 4 && xmlrequest.status == 200) {
                    account.innerHTML = xmlrequest.responseText;
                    let item = JSON.parse(xmlrequest.responseText)
                    console.log(item);
                    
                    let name = document.getElementById("username");
                    name.value = item["name"]
                    let password = document.getElementById("password");
                    password.value = item["password"]
                    let qiandaoma = document.getElementById("qiandaoma");
                    qiandaoma.value = item["qiandaoma"]
                    
                } else {
                    alert("接口出错");
                }
            }
            xmlrequest.open('get', url, true);
            xmlrequest.setRequestHeader('ngrok-skip-browser-warning', 'egaeg')
            xmlrequest.send();
        }
    </script>
</body>

</html>